import React, { PureComponent } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Popconfirm, Switch, message, Icon, Dropdown, Menu, Divider, Drawer, Button, Form, Input, Badge, Modal, Table, Select } from 'antd';
import { BaseForm } from '@/components/FormTools';
import { getSelectList, getThridAuthList } from '@/services/auth';
import { StandardTable, SearchForm } from '@joy/joy-pro';
import { getValue, to } from '@/utils/smallTool';
import moment from 'moment';
import { connect } from 'dva';
import echarts from 'echarts';
import ReactEcharts from 'echarts-for-react';
import router from 'umi/router';
import Permission from '@/utils/Authorized';
import authUtil from '@/utils/auth';

import styles from './index.less';

const pageInfo = { showSizeChanger: true, showQuickJumper: true, defaultPageSize: 10 };

const drawerWidth = '95%';

const dateFormat = 'YYYY-MM-DD' || undefined;
const curDate = new Date();
const preDate = new Date(curDate.getTime());
const nextDate = new Date(curDate.getTime());
const dateStartTime = authUtil.getStartDateTime();
@connect(({ global, loading, thridauth, authority }) => ({
  tableData: thridauth.tableData,
  searchForm: thridauth.searchForm,
  permissionsList: authority.permissionsList,
  tableLoading: loading.effects['thridauth/getThridAuthList'],
  watermarkConfig: global.watermarkConfig,
}))
class ThridAuth extends PureComponent {
  state = {
    drawerStatus: {
      visible: false,
      type: 'add',
    },
    consultantSelectList: [],
    resultDate: [], //
    activeRecord: {}, //app推送列表数据
    pushTaskRecord: {}, //推送任务列表数据
    pageRequest: {
      pageNum: 1,
      pageSize: 10,
    },
    inputConfig: [
      {
        type: 'input',
        placeholder: '请输入流水号',
        name: 'id',
        label: '平台流水号',
      },
      {
        type: 'input',
        placeholder: '请输入姓名',
        name: 'userName',
        label: '姓名',
      },
      {
        type: 'input',
        placeholder: '请输入证件号',
        name: 'cardNo',
        label: '证件号'
      },
      {
        type: 'input',
        placeholder: '请输入手机号',
        name: 'mobile',
        label: '手机号'
      },
      {
        type: 'input',
        placeholder: '请输入服务商流水号',
        name: 'thirdSeqNo',
        label: '服务商流水号'
      },
      {
        type: 'select',
        placeholder: '请选择服务商名称',
        name: 'channelId',
        label: '服务商名称',
        optionsData: [],
        selectProps: {
          allowClear: true,
        }
      },
      {
        type: 'select',
        placeholder: '请输入认证结果',
        name: 'ocrScore',
        optionsData: [],
        label: '认证结果',
        selectProps: {
          allowClear: true,
        }
      },
      {
        type: 'rangePicker',
        name: 'createTimeStart',
        label: '认证时间',
        format: 'YYYY-MM-DD',
        grid: { sm: 24, md: 12,xl:8,xxl:8 },
        defaultValue: [moment(preDate, dateFormat), moment(nextDate, dateFormat)]
      },
    ],
    params: {
      createTimeStart: dateStartTime,
      createTimeEnd: authUtil.getCurrentEedDateTime()
    },
    configData: {}
  };
  constructor(props) {
    super(props);
    this.$drawerForm = React.createRef();
    const { pageRequest, params } = this.state;
    this.getSelectList().then(data => {
      this.setState({
        configData: data
      })
      this.getQueryList(params, pageRequest);
    })
  }

  // 条件筛选
  /**
   * @description 条件筛选 [搜索]
   * @author zhe
   * @date 2020-04-13
   * @param {*} formData
   * @param {*} reaclData
   * @param {*} isClear
   * @memberof
   */
  actionSearch = (formData, reaclData, isClear) => {
    let params = formData;
    let tempDate = params.createTimeStart;
    if (isClear) {
      // 重置表单
      params = {
        createTimeStart: dateStartTime,
        createTimeEnd: authUtil.getCurrentEedDateTime()
      }
    } else if (tempDate && tempDate.length) {
      params.createTimeStart = authUtil.getStartDateTime(new Date(tempDate[0]).getTime());
      params.createTimeEnd = tempDate[1] ?  authUtil.getCurrentEedDateTime(new Date(tempDate[1]).getTime()) : authUtil.getCurrentEedDateTime();
    } else {
      params.createTimeStart = params.createTimeEnd = ''
    }
    this.setState({
      params: params,
    });
    this.getQueryList(params, { pageNum: 1, pageSize: 10 });
  };
  /**
   * @description 请求事件类型下拉列表数据
   * @author zhe
   * @date 2020-04-14
   * @memberof
   */
  getSelectList = async () => {
    const { inputConfig } = this.state;
    const key = 'channel_id';
    const key2 = 'auth_result';
    const constKeys = ['card_type', key, key2];
    const dataObj = await getSelectList({constKeys: constKeys});
    let baseIndex = 4;
    if (dataObj && dataObj.code === '000000') {
      if (dataObj.data !== null) {
        let tempObj = []
        Object.entries(dataObj.data[key]).map(function(val) {
          tempObj.push({ name: val[1], value: val[0]});
        })
        inputConfig[constKeys.indexOf(key) + baseIndex].optionData = tempObj;
        tempObj = []
        Object.entries(dataObj.data[key2]).map(function(val) {
          tempObj.push({ name: val[1], value: val[0]});
        })
        inputConfig[constKeys.indexOf(key2) + baseIndex].optionData = tempObj;
        this.setState({ inputConfig: inputConfig });
        return Promise.resolve(dataObj.data);
      }
    }
    return Promise.reject();
  };
  /**
   * @description 请求列表数据
   * @author zhe
   * @date 2020-04-13
   * @param {*} params
   * @param {*} pageRequest
   * @memberof
   */
  getQueryList = (params, pageRequest) => {
    const type = 'thridauth/getThridAuthList';
    const { dispatch } = this.props;
    dispatch({
      type,
      payload: { ...params, pageRequest: pageRequest},
    });
  };
  /**
   * @description table操作触发改变事件
   * @author songs
   * @date 2019-07-12
   * @param {*} pagination
   * @param {*} filtersArg
   * @param {*} sorter
   * @memberof managementUser
   */
  handleStandardTableChange = (pagination, filtersArg, sorter, actionType) => {
    const { pageSize, current } = pagination;
    const pageRequest = { pageSize, pageNum: current };
    this.getQueryList(filtersArg, pageRequest);
  };
  tableCol = () => {
    const { tableData } = this.props;
    const { pagination = {} } = tableData;
    const { pageSize = 50, current = 0 } = pagination;
    const { configData } = this.state;
    return [
      {
        title: '平台流水号',
        dataIndex: 'id'
      },
      {
        title: '姓名',
        dataIndex: 'userName',
      },
      {
        title: '证件类型',
        dataIndex: 'cardType',
        render: text => { return configData['card_type'] && configData['card_type'][text]}
      },
      {
        title: '证件号',
        dataIndex: 'cardNo',
      },
      {
        title: '手机号',
        dataIndex: 'mobile',
      },
      {
        title: '服务商流水号',
        dataIndex: 'thirdSeqNo',
      },
      {
        title: '渠道ID',
        dataIndex: 'channelId',
      },
      {
        title: '服务商名称',
        dataIndex: 'channelName',
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
      },
      {
        title: '认证结果',
        dataIndex: 'ocrScore',
        render: text => { return configData['auth_result'] && configData['auth_result'][text]}
      }
    ];
  };
  render() {
    const { tableCol, changeDrawerStatus, tableColumnsList, taskDetailsTopList, taskDetailsBtmList, changePushTaskStatus } = this;
    const { inputConfig, drawerStatus, pushTaskStatus, resultDate, pushTaskRecord } = this.state;
    const { tableLoading, watermarkConfig, tableData } = this.props;
    const { list = [], pagination = {} } = tableData;
    return (
      <div>
        <PageHeaderWrapper title="" className="hasContent">
          <div style={{ background: '#fff', padding: '20px 0px 0px 24px', marginBottom: '10px' }}>
            <SearchForm
              defaultInput={inputConfig.slice(0, 3)}
              moreInput={inputConfig.slice(3)}
              gutter={{ md: 10 }}
              useCol={{ sm: 24, md: 12, xl: 8, xxl: 8 }}
              onSearch={this.actionSearch}
            ></SearchForm>
          </div>
          <Card bordered={false}>
            <div style={{ marginBottom: '10px', height: '32px', lineHeight: '32px' }}>第三方认证明细分页查询</div>
            <StandardTable
              isWatermark
              watermark={{ ...watermarkConfig }}
              dataSource={list}
              pagination={{ ...pagination, ...pageInfo }}
              columns={tableCol()}
              loading={tableLoading}
              rowKey={(record, index) => index}
              onChange={($pagination, filtersArg, sorter) => {
                this.handleStandardTableChange($pagination, this.state.params, sorter, 'thridauth/getThridAuthList');
              }}
            ></StandardTable>
          </Card>
        </PageHeaderWrapper>
      </div>
    );
  }
}

export default ThridAuth;
